<template>
  <div class="resume-detail-basic">
    <div class="basic-header">
      <div class="name">{{ data.name }}</div>
      <div class="sex" :class="{ women: data.sex === '女' }">
        <SvgIcon :name="data.sex === '男' ? 'nan' : 'nv1'" />
      </div>
    </div>
    <img class="basic-avatar" :src="data.recentPhotoUrl" />
    <div class="basic-info">
      <div class="basic-info-row">
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="shenfenzheng" />
          <span class="basic-info-label">身份证号：</span>
          <span class="basic-info-text">{{ data.idCode }}</span>
        </div>
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="ziyuan" />
          <span class="basic-info-label">身高：</span>
          <span class="basic-info-text">{{ data.height }} cm</span>
        </div>
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="tizhong" />
          <span class="basic-info-label">体重：</span>
          <span class="basic-info-text">{{ data.weight }} kg</span>
        </div>
      </div>
      <div class="basic-info-row">
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="chushengriqi" />
          <span class="basic-info-label">出生日期：</span>
          <span class="basic-info-text">{{ data.birthday }}</span>
        </div>
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="jiehunzhengshu" />
          <span class="basic-info-label">婚姻状态：</span>
          <span class="basic-info-text">{{ data.marriageName }}</span>
        </div>
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="jingwuicon_svg-" />
          <span class="basic-info-label">政治面貌：</span>
          <span class="basic-info-text">{{ data.partiesName }}</span>
        </div>
      </div>
      <div class="basic-info-row">
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="hujiguanli" />
          <span class="basic-info-label">户籍类型：</span>
          <span class="basic-info-text">{{ data.hukouTypeName }}</span>
        </div>
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="shoucang" />
          <span class="basic-info-label">民族：</span>
          <span class="basic-info-text">{{ data.nationName }}</span>
        </div>
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="dizhi" />
          <span class="basic-info-label">现居地：</span>
          <span class="basic-info-text">{{ data.livingAddr }}</span>
        </div>
      </div>
      <div class="basic-info-row">
        <div class="basic-info-item">
          <SvgIcon class="basic-info-icon" name="shenfenhuji" />
          <span class="basic-info-label">身份证所在地：</span>
          <span class="basic-info-text">{{ data.hukouAddr }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResumeDetailBasic',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.resume-detail-basic {
  padding: 0 0.2rem;
  position: relative;
  .basic-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.5rem;
  }
  .name {
    float: left;
    font-size: 32px;
    color: $colorText1;
  }
  .sex {
    margin-left: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    @include circle(26px);
    background-color: $colorPrimary;
    font-size: 13px;
    color: $colorWhite;
    &.women {
      background-color: $colorDanger;
    }
  }
  .basic-avatar {
    position: absolute;
    right: 0;
    top: 0;
    @include circle(100px);
  }
  .basic-info {
    margin-right: 100px;
    .basic-info-row {
      display: flex;
      margin-bottom: 0.4rem;
      .basic-info-item {
        flex: 1;
        color: $colorText2;
        display: flex;
        align-items: center;
        .basic-info-icon {
          font-size: 18px;
          margin-right: 14px;
        }
      }
    }
  }
}
</style>
